<template>
  <div>
    <div v-if="this.userInfo.certificationStatus < 4">
      <el-form class="form-container" :model="form" ref="form" label-width="200px" label-position="right" :rules="rules">
        <el-form-item label="银行行号">
          {{form.bankNumber}}
        </el-form-item>
        <el-form-item label="开户银行">
          {{form.bankBranchName}}
        </el-form-item>
        <el-form-item label="银行账号">
          {{form.accountNumber}}
        </el-form-item>
        <el-form-item label="小额鉴定金额" prop="amt">
          <el-input v-model="form.amt" class="line-input" placeholder="请输入小额鉴定金额"></el-input>
        </el-form-item>
      </el-form>
      <div class="operation">
        <el-button type="primary" @click="valid">提交</el-button>
      </div>
    </div>
    <div v-if="this.userInfo.certificationStatus >= 4" class="h-100p bg-fff bdr-10 detail">
      <div class="account-success-box">
        <i class="iconfont icon-wancheng"></i>
        <div class="account-success-box-word"><h4>认证完成</h4><span>实名认证完成，请核对以下信息，如有疑问请联系客服!</span></div>
      </div>
      <div class="detail-container">
				<v-certica-detail :certica="certicaDetailData" :account="accountDetail"></v-certica-detail>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
  import { Action } from 'vuex-class'
  import vFormTitle from '@/components/form-title'
  import vCerticaDetail from '@/components/certica-detail'

  @Component({
      components: {
          vFormTitle,
          vCerticaDetail
      }

  })
  export default class Step1 extends Vue {
    @Action getPolicy
    @Prop() userInfo

    mounted () {
      this.getPolicy()
    }

    form = {
      bankNumber: '',
      bankBranchName: '',
      accountNumber: '',
      amt: '',
      id: ''
    }
    // tempAccountAmtForm = {}
    rules = {
      amt: [
        {
          required: true,
          trigger: 'blur',
          message: '请输入小额鉴定金额'
        }
      ]
    }
    userId = ''

    certicaDetailData = {}
    accountDetail = {}
    async post () {
      let f = {
        ...this.form,
        userId: this.userId
      }
      let res: AjaxResponse = await this.$axios.post('g/gateway/account/auth', f)
      this.$utils.tips(res)
    }


    valid () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.post()
        }
      })
    }




    async getBankInfo () {
      let res: AjaxResponse = await this.$axios.get(`g/gateway/account/user/${this.userId}`)
      if(this.form.id != ""){
          for (let key in this.form) {
              if (this.form.hasOwnProperty(key)) {
                  this.form[key] = res.data[0][key]
              }
          }
      }
    }
    async getDetail () {
        let id = JSON.parse(window.sessionStorage.getItem('userInfo')).userId
        let res: AjaxResponse = await this.$axios.get(`g/gateway/member/${id}`)
        this.certicaDetailData = res.data
        let enterpriseUserId = JSON.parse(window.sessionStorage.getItem('userInfo')).userId
        let resAccount: AjaxResponse = await this.$axios.get(`g/gateway/account/user/${enterpriseUserId}`)
        this.accountDetail = resAccount.data[0]
    }

    mounted () {
      let userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
      this.userId = userInfo.userId
      this.getBankInfo()
      this.getDetail()
      if(window.sessionStorage.getItem('certicaAccountDetail') != null){
          this.form.bankNumber = JSON.parse(window.sessionStorage.getItem('certicaAccountDetail')).bankNumber
          this.form.bankBranchName = JSON.parse(window.sessionStorage.getItem('certicaAccountDetail')).bankName
          this.form.accountNumber = JSON.parse(window.sessionStorage.getItem('certicaAccountDetail')).accountNumber
          this.form.id = JSON.parse(window.sessionStorage.getItem('certicaAccountDetail')).id
      }
			// Object.assign(this.certicaDetailDatas,this.certicaDetailData,this.certicaDetailAccountData)
    }
  }
</script>
<style lang="less" scoped>
  .form-container {
    width: 1180px;
    margin: 0 auto;
    padding: 60px 0 30px;
  }

  .operation {
    text-align: center;
    font-size: 14px;
    color: #999;
    .el-button {
      margin: 30px 0;
    }
  }

  .el-steps {
    margin-bottom: 60px;
  }
  .icon-wancheng {
    color: #46b87f;
    font-size: 42px;
    margin-right: 14px;
  }
  .account-success-box {
    display: flex;
    margin: 30px 0 30px 30px;
  }
  .account-success-box-word h4 {
    color: #333;
    font-size: 30px;
    margin-bottom: 6px;
  }
  .account-success-box-word span {
    color: #666;
  }
	/*.detail-container {*/
		/*display: flex;*/
		/*flex-wrap: wrap*/
	/*}*/
</style>
